<extend name="Public:innerbase" />
<block name="css">
<link rel="stylesheet" type="text/css" href="/Public/Common/uploadify/uploadify.css" />
<style>
	#imgList{
		overflow:hidden;
		padding:0;
	}
	#imgList li {
		position: relative;
		display: inline-block;
		margin-right: 8px;
		margin-bottom: 10px;
		float:left;
	}
	.img-wrapper{
		height: 180px;
		text-aligin:center;
	}
	#imgList li img {
		cursor: pointer;
		opacity: 0.8;
		background-color: #ace;
		vertical-align: middle;
		max-width:100%;
		max-height:100%;
	}
	.cBtn {
		width: 25px;
		height: 25px;
		visibility:hidden;
		background-color: rgb(223, 223, 223);
		border-radius: 50%;
		color: rgb(163, 31, 31);
		position: absolute;
		right: 2px;
		top: 2px;
		padding: 2px;
		text-align: center;
	}
	
	.img-wrapper:hover .cBtn{
		visibility:visible;
	}
</style>
</block>
<block name="content">
	<div class="container-fluid">
		<div class="page-header wm-page-header">
			<h3>图片列表</h3>
			<a class="btn btn-success" data-backdrop="static" data-toggle="modal" data-target="#modal" href="#">
				<span class="glyphicon glyphicon-plus"></span>&nbsp;上传图片
			</a>
		</div>
        <ul id="imgList" load-state="1">
            <volist name="imgs" id="img">
            <li>
				<div class="img-wrapper">
				<img class="lazy" data-original="{$img.url}?imageView2/2/w/240/h/180" />
				<a href="javascript:;" class="cBtn" id="{$img.id}"><span class="glyphicon glyphicon-remove"></span></a>
				</div>
			</li>
            </volist>
        </ul>
		<div>{$page}</div>
		<div class="modal fade" id="modal">
			<div class="modal-dialog">
				<div class="modal-content">
				  <div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
					<h4 class="modal-title">图片批量上传</h4>
				  </div>
				  <div class="modal-body">
					<input id="fileUpload" name="file" type="file" />
				  </div>
				  <div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				  </div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	</div>
   
</block>
<block name="js">
<script type="text/javascript" src="/Public/Common/uploadify/jquery.uploadify.min.js"></script>
<script charset="utf-8" src="/Public/Common/js/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('#fileUpload').uploadify({
			'fileObjName' : 'file',
			'swf'      : '{:STATICS}/uploadify/uploadify.swf',
			'uploader' : '{:U("Qiniu/upload")}',
			'buttonText' : '选择图片',
			'multi' : true,
			'onUploadSuccess' : function(file, data, response) {
				data=$.parseJSON(data);
				if(data.error==0){
					/*var li = ' <li><div class="img-wrapper"><img src="'+data.url+'?imageView2/2/w/240/h/180" /><a href="javascript:void(0);" class="cBtn" id="{$img.id}"><span class="glyphicon glyphicon-remove"></span></a></div></li>'*/
				}
			},
			'onUploadError' : function(file, errorCode, errorMsg, errorString) {
				alert('文件 ' + file.name + ' 上传失败: ' + errorString);
			}
		});
		$('#modal').on('hidden.bs.modal', function (e) {
			location.reload();
		});
		$("img.lazy").lazyload({});
	});
	$("#imgList li a.cBtn").click(function(){
		var img_rm=$(this).parent();
		var img_id=$(this).attr("id");
		$.ajax({
			url:"/user/index/imgs_delete.html?id="+img_id,
			dataTpe:"json",
			success:function(e){
				$(img_rm).remove();
			}
		});
	});
</script>
</block>